import React from 'react';
//通过解构的方式解构出来createRoot
import { createRoot } from 'react-dom/client';

// 类组件必须是大写开头的组件名
// 类组件应该继承React.Component父类，从而可以使用父类中提供的方法或属性
// 类组件必须提供render方法，并返回组件的结构
// class 组件名 extends React.Component{}
class HandleHello extends React.Component {
  render() {
    return <h3>我是一个类组件</h3>;
  }
}
// class HandleHello2 extends React.Component {
//   render() {
//     return <h3>我是HandleHello2类组件</h3>;
//   }
// }

// es6之前，使用构造函数，大写字母开头
function Person() {
  this.name = '马云';
  this.writeCode = () => {
    console.log('我是Person函数----->');
  };
}
const PersonObj = new Person();
console.log('PersonObj----->', PersonObj);

// es6后， 使用class创建对象
class People {
  name = '马化腾';
  writeCode() {
    console.log('我是People组件----->');
  }
}

// 继承People的属性
class FrontEnd extends People {
  name = '前端';
}

const FrontEndObj = new FrontEnd();
console.log('FrontEndObj----->', FrontEndObj);

// 继承People的属性
class BackEnd extends People {
  name = '后端';
}
const Be = new BackEnd();
console.log('Be----->', Be);
Be.writeCode(); //我是People组件方法

// // 这是React18版本新出的挂载节点的方法
// const root = createRoot(document.getElementById('root'));
// root.render(<HandleHello></HandleHello>);
